<template>
  <div class="songs-container">
    <div class="tab-bar">
      <span class="item"
            :class="{active:tag==0}"
            @click="tag=0">全部</span>
      <span class="item"
            :class="{active:tag==7}"
            @click="tag=7">华语</span>
      <span class="item"
            :class="{active:tag==96}"
            @click="tag=96">欧美</span>
      <span class="item"
            :class="{active:tag==8}"
            @click="tag=8">日本</span>
      <span class="item"
            :class="{active:tag==16}"
            @click="tag=16">韩国</span>
    </div>
    <!-- 底部的table -->
    <table class="el-table playlit-table">
      <thead>
        <th></th>
        <th></th>
        <th>音乐标题</th>
        <th>歌手</th>
        <th>专辑</th>
        <th>时长</th>
      </thead>
      <tbody>
        <tr class="el-table__row"
            v-for="(item,i) in lists"
            :key="i">
          <td>{{i+1}}</td>
          <td>
            <div class="img-wrap">
              <img :src="item.album.picUrl"
                   alt="" />
              <!-- 播放按钮 -->
              <span @click="playmusic(item.id)"
                    class="iconfont icon-play el-icon-headset"></span>
            </div>
          </td>
          <td>
            <div class="song-wrap">
              <div class="name-wrap">
                <span>{{item.name}}</span>
                <span class="iconfont icon-mv"></span>
              </div>
              <span>{{item.album.name}}</span>
            </div>
          </td>
          <td>{{item.album.artists[0].name}}</td>
          <td>{{item.album.name}}</td>
          <td>{{item.duration}}</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
import axios from 'axios'
export default {
  name: 'songs',
  data () {
    return {
      // 歌曲列表
      lists: [],
      // 分类
      tag: '0'
    };
  },
  watch: {
    tag () {
      this.getList()
    }
  },
  created () {
    this.getList()
  },
  methods: {
    // 点击播放歌曲
    playmusic (id) {
      axios({
        url: 'https://autumnfish.cn/song/url',
        methods: 'get',
        params: {
          id
        }
      }).then(res => {
        console.log(res);
        let url = res.data.data[0].url
        // this.$parent 可以直接获取父组件
        this.$parent.musicUrl = url
      })
    },
    // 请求数据
    getList () {
      // 获取最新音乐
      axios({
        url: 'https://autumnfish.cn/top/song',
        methods: 'get',
        params: {
          // 传递设置的数据
          type: this.tag
        }
      }).then(res => {
        console.log(res);
        this.lists = res.data.data
        //处理时长  毫秒-》分
        for (let i = 0; i < this.lists.length; i++) {
          // 获取总毫秒数
          let duration = this.lists[i].duration
          // 毫秒换成秒   /1000
          // 秒换成分钟   /60
          // 秒换成秒     %60   除不尽的就是秒
          let min = parseInt(duration / 1000 / 60)
          min = min < 10 ? '0' + min : min
          let sec = parseInt(duration / 1000 % 60)
          sec = sec < 10 ? '0' + sec : sec
          // console.log(min + ':' + sec);
          this.lists[i].duration = `${min}:${sec}`
        }
      })
    }
  }
};
</script>

<style >
</style>
